<template>
    <div class="detail">
        <h2>电影详情</h2>
        <p>电影名称：{{name}}</p>
        <p>上映时间:{{showingon}}</p>
        <button @click="next">换一部</button>
    </div>
</template>

<script>
    export default {
       data(){
        return {
            name:'功夫熊猫',
            showingon:'2021-11-12'
        }
       },
       methods: {
        next() {
            //修改vue对象的name属性
            this.name = '这个杀手不太冷静'
        }
       },
     }
</script>

<style lang="scss" scoped>
.detail{
    color:red;
}
</style>